<template>
  <div class="contain">
    <el-card>
      <el-row class="btn-wrap" style="min-width:800px;line-height:30px;">

        <el-col :span="6">
          <span class="el-row-col_span">分类:</span>
          <el-tooltip content="分类">
            <el-select v-model="params.className" filterable clearable placeholder="请选择分类" size="small"
              @change="getChildClassName($event)">
              <el-option v-for="(item) in classNameList" :label="item.className" :value="item.className"></el-option>
            </el-select>

          </el-tooltip>
        </el-col>
        <el-col :span="6" v-if="childClassNameList.length>0">
          <span class="el-row-col_span">二级分类:</span>
          <el-tooltip content="分类">
            <el-select v-model="params.childClassName" filterable clearable placeholder="请选择分类" size="small">
              <el-option v-for="(item) in childClassNameList[0]" :label="item.className" :value="item.className">
              </el-option>
            </el-select>

          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <span class="el-row-col_span">标签:</span>
          <el-tooltip content="标签">
            <el-select v-model="params.labelName" filterable clearable allow-create default-first-option
              placeholder="请选择标签" size="small">
              <el-option v-for="(item) in liveLabelList" :label="item.labelName" :value="item.labelName">
              </el-option>
            </el-select>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <span class="el-row-col_span">平台:</span>
          <el-tooltip content="平台">
            <el-select v-model="params.liveSource" filterable clearable placeholder="请选择平台" size="small">
              <el-option v-for="(item) in liveSourceList" :label="item.sourceName" :value="item.sourceName">
              </el-option>
            </el-select>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span class="el-row-col_span">主播:</span>
          <el-tooltip content="标主播签">
            <el-input class="base-search" clearable v-model="params.hostName" placeholder="请输入主播" size="small">
            </el-input>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <span class="el-row-col_span">是否展示:</span>
          <el-tooltip content="显示">
            <el-select v-model="params.isShow" filterable clearable placeholder="请选择" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <span class="el-row-col_span">是否banner:</span>
          <el-tooltip content="banner">
            <el-select v-model="params.isBanner" filterable clearable placeholder="请选择" size="small">
              <el-option label="全部" value=""></el-option>
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span class="el-row-col_span">创建时间:</span>
          <el-tooltip content="创建时间">
            <el-date-picker v-model="params.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" size="small">
            </el-date-picker>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: right;margin-right:20px;">
          <span class="seach-btn">
            <el-button class="base-btn" icon="el-icon-search" type="primary" @click="getDataList(true)">查询
            </el-button>
            <el-button class="base-btn" icon="el-icon-refresh" type="primary" @click="reset">重置</el-button>
          </span>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="dialogFormShow(false); ">新增直播</el-button>
          <!-- <el-button type="primary" @click="dialogFormVisible=true">编辑</el-button> -->
        </el-col>
      </el-row>
      <el-table ref="table" :data="dataList" :header-cell-style="{background:'#f2f4f6'}" style="width: 100%;"
        v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        :default-sort="{prop: 'createTime', order: 'descending'}">

        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="分类" prop="className" width="60"></el-table-column>
        <el-table-column label="二级分类" prop="childClassName" width="90"></el-table-column>
        <el-table-column label="主播" prop="hostName" width="150"></el-table-column>
        <!-- <el-table-column label="标签" prop="labelName"></el-table-column> -->
        <el-table-column label="直播间连接" prop="liveLink" :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            <el-button type="text" @click="checkLiveLink(scope.row.liveLink)">{{scope.row.liveLink}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="imgBase">
          <template slot-scope="scope">
            <img :src="scope.row.imgBase" style="width: 100px;">
          </template>
        </el-table-column>
        <!-- <el-table-column label="内容" prop="liveContent" :show-overflow-tooltip='true'> </el-table-column> -->
        <!-- <el-table-column label="直播区间"  :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              {{scope.row.liveStartTime}}-{{scope.row.liveEndTime}}
            </template>
          </el-table-column> -->
        <!-- <el-table-column label="点击量" prop="hits"></el-table-column> -->

        <!-- <el-table-column label="平台" prop="liveSource"> </el-table-column> -->
        <el-table-column label="排名优先级" prop="priority"> </el-table-column>
        <el-table-column label="是否是banner" prop="isBanner" width="150">
          <template slot-scope="scope">
            {{scope.row.isBanner.data[0]==1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column label="是否显示在主屏" prop="isShow" width="150">
          <template slot-scope="scope">
            {{scope.row.isShow.data[0]==1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="120">
          <template slot-scope="scope">
            {{scope.row.createTime | dateformat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <p>
                <el-button type="text" title="查看物流">查看详情</el-button>
              </p> -->
            <p>
              <el-button type="text" title="编辑" @click="dialogFormShow(true,scope.row)">编辑</el-button>
            </p>
            <p>
              <el-button type="text" title="删除" @click="deleteLiveInfo(scope.row)">删除</el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="totals"></el-pagination>
    </el-card>

    <el-dialog :title="editType" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="分类" :label-width="formLabelWidth" prop="className">
          <el-select v-model="form.className" filterable clearable allow-create default-first-option
            placeholder="请选择活动区域" @change="getClassName2($event)">
            <el-option v-for="(item) in classNameList" :label="item.className" :value="item.className"></el-option>
          </el-select>
          <!-- <span class="el-upload__tip"> <i class="el-icon-info"></i>可以创建并选中选项中不存在的分类 </span> -->
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth" prop="childClassName"
          v-if="childClassNameList2.length>0">
          <el-select v-model="form.childClassName" filterable clearable placeholder="请选择分类" size="small"
            @change="getChildClassName2($event)">
            <el-option v-for="(item) in childClassNameList2[0]" :label="item.className" :value="item.className">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主播" :label-width="formLabelWidth" prop="hostName">
          <el-input v-model="form.hostName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主播头像" :label-width="formLabelWidth" prop='hosthead'>
          <el-upload class="avatar-uploader" :action=domain :show-file-list="false" :http-request=upqiniuHead
            :on-success="handleAvatarSuccess_head" :on-preview="handlePictureCardPreview_head"
            :before-upload="beforeUpload_head">
            <img v-if="form.hosthead" :src="form.hosthead" class="avatar avatar " style="max-width:100px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible_head">
            <img width="100%" :src="form.hosthead" alt="111">
          </el-dialog>

          <div class="el-upload__tip">
            <i class="el-icon-info"></i>
            只能上传 jpg / png 文件，且不超过2M,建议尺寸:
            <span>100 * 100</span>
          </div>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth" prop="labelName">
          <el-select v-model="form.labelName" filterable clearable allow-create default-first-option
            placeholder="请选择标签">
            <el-option v-for="(item) in liveLabelList" :label="item.labelName" :value="item.labelName">
            </el-option>
          </el-select>
          <!-- <span class="el-upload__tip"> <i class="el-icon-info"></i>可以创建并选中选项中不存在的标签 </span> -->
        </el-form-item>
        <el-form-item label="直播间连接" :label-width="formLabelWidth" prop="liveLink">
          <el-input v-model="form.liveLink" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="直播间区间" :label-width="formLabelWidth">
          <el-time-select placeholder="起始时间" v-model="form.liveStartTime" :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:39'
              }" style="width: 30%;">
          </el-time-select>
          -
          <el-time-select placeholder="结束时间" v-model="form.liveEndTime" :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:59',
                minTime: form.liveStartTime
              }" style="width: 30%;">
          </el-time-select>

        </el-form-item>
        <el-form-item label="是否是banner" :label-width="formLabelWidth">
          <el-switch v-model="form.isBanner"></el-switch>
        </el-form-item>
        <el-form-item label="是否显示在主页" :label-width="formLabelWidth">
          <el-switch v-model="form.isShow"></el-switch>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth" prop='imgBase'>
          <el-upload class="avatar-uploader" :action=domain :show-file-list="false" :http-request=upqiniuImg
            :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview" :before-upload="beforeUpload">
            <img v-if="form.imgBase" :src="form.imgBase" class="avatar avatar2 " style="width: 400px;"
              :class="{avatar_banner:form.isBanner,avatar:!form.isBanner}">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.imgBase" alt="222" style="width: 400px;">
          </el-dialog>

          <div class="el-upload__tip"> <i class="el-icon-info"></i> 只能上传 jpg / png 文件，且不超过2M,建议尺寸: <span
              v-if="form.isBanner">860 * 390</span><span v-else>194 * 129</span></div>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth" prop="liveContent">
          <el-input type="textarea" v-model="form.liveContent"></el-input>
        </el-form-item>
        <el-form-item label="平台" :label-width="formLabelWidth" prop="liveSource">
          <el-select v-model="form.liveSource" filterable clearable allow-create default-first-option
            placeholder="请选择活动区域">
            <el-option v-for="(item) in liveSourceList" :label="item.sourceName" :value="item.sourceName">
            </el-option>
          </el-select>
          <!-- <span class="el-upload__tip"> <i class="el-icon-info"></i> 可以创建并选中选项中不存在的平台 </span> -->
        </el-form-item>
        <el-form-item label="排名优先级" :label-width="formLabelWidth" prop="priority">
          <el-select v-model="form.priority" filterable clearable allow-create default-first-option
            placeholder="请选择优先级">
            <el-option v-for="(item) in 20" :label="item" :value="item"></el-option>
          </el-select>
          <span class="el-upload__tip"> <i class="el-icon-info"></i> 排名优先级：数字越小越靠前，可自行创建</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="addLiveInfo('form')" v-if="!isEdit && isAvailable">确 定</el-button>
        <el-button type="primary" @click="updateLiveInfo('form')" v-else-if="isEdit && isAvailable">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 10,
          className: "",
          labelName: '',
          hostName: '',
          liveSource: '',
          createTime: '',
          isBanner: '',
          isShow: '',
          childClassName: ""
        },
        childClassNameList: [],
        childClassNameList2: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          id: 1,
          createTime: '',
          className: '',
          classNameID: '',
          childClassName: '',
          childClassNameID: '',
          hostName: '',
          hosthead: '',
          labelName: '',
          liveLink: '',
          imgBase: '',
          liveContent: '',
          liveSource: '',
          liveStartTime: "2020-07-17 13:00:00",
          liveEndTime: "2020-07-17 17:00:00",
          OPID: '1',
          OPName: 'admin',
          isShow: true,
          hits: '',
          isPriority: '',
          priority: 0,
          isBanner: false
        },
        rules: {
          className: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          hostName: [
            { required: true, message: '请填写主播', trigger: 'blur' }
          ],
          //   labelName: [
          //     { required: true, message: '请选择标签', trigger: 'change' }
          // ],
          liveLink: [
            { required: true, message: '请填写直播链接', trigger: 'blur' }
          ],
          liveSource: [
            { required: true, message: '请选择直播平台', trigger: 'change' }
          ],
          imgBase: [
            { required: true, message: '请选择图片', trigger: 'change' }
          ],
          hosthead: [
            { required: true, message: '请选择图片', trigger: 'change' }
          ]
        },
        formLabelWidth: '120px',
        dataList: [],
        editType: '新增数据',
        isEdit: false,
        totalPages: 0,
        totals: 0,
        imageTooLarge: false,
        loading: false,

        dialogImageUrl: '',
        dialogVisible: false,
        dialogVisible_head: false,
        token: {},
        // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
        domain: 'http://up-z2.qiniup.com',
        // 这是七牛云空间的外链默认域名
        qiniuaddr: 'cdn.cryptomanor.xyz',
        isAvailable: true,
        liveSourceList: [],
        classNameList: [],
        liveLabelList: [],
      }
    },
    computed: {
      onRoutes() {
        //默认选中的菜单，:default-active 和 :index 一定要一致才有效果
        return this.$route.params.pathMatch.replace('/', '')
      },
    },
    created() {
    },
    mounted() {
      this.initMenuList();
      this.initLiveSourceList();
      this.initLiveLabelList();
      this.getDataList();
    },
    methods: {
      async initMenuList() {

        let res = await this.$axios.post(this.API.list.getCategory);
        if (res.data.code == "0") {
          this.classNameList = res.data.data
        }
      },
      async initLiveSourceList() {

        let res = await this.$axios.get(this.API.list.getLiveSource);
        if (res.data.code == "0") {
          this.liveSourceList = res.data.data
        }

      },
      async initLiveLabelList() {
        let res = await this.$axios.post(this.API.list.getLiveLabel);
        if (res.data.code == "0") {
          this.liveLabelList = res.data.data
        }
      },
      getChildClassName(className) {

        var childClassNameList = []
        for (let i = 0; i < this.classNameList.length; i++) {
          if (this.classNameList[i].childMenuData.length > 0 && this.classNameList[i].className == className) {
            childClassNameList.push(this.classNameList[i].childMenuData);
          }
        }
        console.log(childClassNameList)
        this.childClassNameList = childClassNameList
      },
      getClassName2(className) {

        var childClassNameList = []
        for (let i = 0; i < this.classNameList.length; i++) {
          if (this.classNameList[i].childMenuData.length > 0 && this.classNameList[i].className == className) {
            childClassNameList.push(this.classNameList[i].childMenuData);
          }

          if (className == this.classNameList[i].className) {
            this.form.classNameID = this.classNameList[i].id
          }
        }

        this.childClassNameList2 = childClassNameList
      },
      getChildClassName2(className) {

        var childClassNameList = []
        for (let i = 0; i < this.childClassNameList2[0].length; i++) {
          if (className == this.childClassNameList2[0][i].className) {
            this.form.childClassNameID = this.childClassNameList2[0][i].id
          }
        }
      },
      // 获取列表
      async getDataList(isBtn) {

        if (isBtn) {
          this.params.pageNum = 1;
        }

        //创建时间
        if (this.params.createTime && this.params.createTime.length > 0) {
          this.params.startDate = this.params.createTime[0]
          this.params.endDate = this.params.createTime[1]
        }

        if (this.params.isShow.length > 0) {
          this.params.isShow = this.params.isShow ? 1 : 0;
        }
        if (this.params.isBanner.length > 0) {
          this.params.isBanner = this.params.isBanner ? 1 : 0;
        }

        this.loading = true

        let res = await this.$axios.post(this.API.list.getDataList, this.params);
        console.log(res)
        if (res.data.code == "0") {
          this.dataList = res.data.data[0];

          let totals = res.data.data[1];
          this.totals = totals[0].total;

          this.totalPages = ((this.totals + this.pageSize - 1) / this.pageSize).toFixed(0);

          this.$message.success("查询成功");

          this.loading = false
        }

      },
      // 分页方法
      handleCurrentChange(val) {
        this.params.pageNum = val
        this.getDataList()
      },
      handleSizeChange(val) {
        this.params.pageNum = 1
        this.params.pageSize = val
        this.getDataList()
      },
      //查看详情
      checkExpress(row) {
        // this.$router.push({ path: "/checkExpress", query: { orderId: row.orderId } })
      },

      //弹出编辑框
      dialogFormShow(isEdit, row) {
        if (!isEdit) {
          this.form = {
            id: 1,
            createTime: '',
            className: '',
            classNameID: '',
            childClassName: '',
            childClassNameID: '',
            hostName: '',
            hosthead: '',
            labelName: '',
            liveLink: '',
            imgBase: '',
            liveContent: '',
            liveSource: '',
            liveStartTime: "",
            liveEndTime: "",
            OPID: '1',
            OPName: 'admin',
            isShow: true,
            hits: 0,
            isPriority: '',
            priority: 0,
            isBanner: false
          }
          this.dialogFormVisible = true;
          this.isEdit = false;
          this.editType = "新增直播信息";
        }
        else {

          this.form = { ...row };
          // this.form.imgBase = row.imgBase;

          this.form.isShow = row.isShow.data[0] == 1 ? true : false;
          this.form.isBanner = row.isBanner.data[0] == 1 ? true : false;

          this.dialogFormVisible = true;
          this.isEdit = true;
          this.editType = '编辑直播信息';
        }
      },
      //添加信息
      async addLiveInfo(formName) {

        this.isAvailable = false;
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if (this.imageTooLarge) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
              return false;
            }

            let res = await this.$axios.post(this.API.list.addLiveInfo, this.form);
            if (res.data.code == 0) {
              this.$message.success("添加成功！")
              this.getDataList();

              this.isAvailable = true;
              this.dialogFormVisible = false;
            }
          } else {
            return false;
          }
        });

      },
      //编辑信息
      async updateLiveInfo(formName) {

        this.isAvailable = false;
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if (this.imageTooLarge) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
              return false;
            }

            let res = await this.$axios.post(this.API.list.updateLiveInfo, this.form);
            if (res.data.code == 0) {
              this.getDataList();
              this.$message.success("编辑成功");

              this.isAvailable = true;
              this.dialogFormVisible = false;
            }
          } else {
            return false;
          }
        });
      },
      //删除信息
      async deleteLiveInfo(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {

          let res = await this.$axios.post(this.API.list.deleteLiveInfo, { id: row.id });

          if (res.data.code == 0) {
            this.getDataList();

            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
      ,
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //查看链接
      checkLiveLink(href) {
        window.open(href, 'top');
      },

      //重置
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
          className: "",
          labelName: '',
          hostName: '',
          liveSource: '',
          createTime: '',
          isBanner: '',
          isShow: ''
        }
      },

      handleAvatarSuccess(res, file) {
        this.form.imgBase = URL.createObjectURL(file.raw);
      },
      handleRemove(file, fileList) {
      },
      handlePictureCardPreview(file) {
        this.form.imgBase = file.url;
        this.dialogVisible = true;
      },
      // 上传文件到七牛云
      upqiniuHead(req) {

        const config = {
          headers: { 'Content-Type': 'multipart/form-data' }
        }
        let filetype = ''
        if (req.file.type === 'image/png') {
          filetype = 'png'
        } else {
          filetype = 'jpg'
        }
        this.isAvailable = false;
        // 重命名要上传的文件
        const keyname = 'ablum' + (new Date()).valueOf() + Math.floor(Math.random() * 100) + '.' + filetype
        // 从后端获取上传凭证token
        this.$axios.get('/api/qiniuApi/qiniutoken').then(res => {

          const formdata = new FormData()
          formdata.append('file', req.file)
          formdata.append('token', res.data.data.uploadToken)
          formdata.append('key', keyname)
          // 获取到凭证之后再将文件上传到七牛云空间
          this.$axios.post(this.domain, formdata, config).then(res => {
            this.form.hosthead = 'http://' + this.qiniuaddr + '/' + res.data.key
            this.$message.success("头像上传成功")

            this.isAvailable = true;
          })
        })
      },

      // 上传文件到七牛云
      upqiniuImg(req) {

        const config = {
          headers: { 'Content-Type': 'multipart/form-data' }
        }
        let filetype = ''
        if (req.file.type === 'image/png') {
          filetype = 'png'
        } else {
          filetype = 'jpg'
        }
        this.isAvailable = false;
        // 重命名要上传的文件
        const keyname = 'ablum' + (new Date()).valueOf() + Math.floor(Math.random() * 100) + '.' + filetype
        // 从后端获取上传凭证token
        this.$axios.get('/api/qiniuApi/qiniutoken').then(res => {

          const formdata = new FormData()
          formdata.append('file', req.file)
          formdata.append('token', res.data.data.uploadToken)
          formdata.append('key', keyname)
          // 获取到凭证之后再将文件上传到七牛云空间
          this.$axios.post(this.domain, formdata, config).then(res => {
            this.form.imgBase = 'http://' + this.qiniuaddr + '/' + res.data.key
            this.$message.success("图片上传成功")

            this.isAvailable = true;
          })
        })
      },



      // 验证文件合法性
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      handleAvatarSuccess_head(res, file) {
        this.form.hosthead = URL.createObjectURL(file.raw);
      },
      handleRemove_head(file, fileList) {
      },
      handlePictureCardPreview_head(file) {
        this.form.hosthead = file.url;
        this.dialogVisible_head = true;
      },
      beforeUpload_head(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style lang="less" scoped>
  .el-card {
    margin: 20px 0;
  }

  .el-row-col_span {
    width: 78px;
    display: inline-block;
    text-align: right;
    margin-right: 10px;
  }
</style>